<template>
	<view class="uni-tab-bar">
		<block v-for="(tab, index) in tabBars" :key="index">
			<!-- tap 触摸事件 -->
			<view v-if="index === tabBars.length - 1" class="swiper-tab-list" :class="{ active: index === tabIndex }" @tap="tabChang(index)">
				{{ userInfo.sex === 1 ? '女神' : '男神' }}
				<view></view>
			</view>
			<view v-else class="swiper-tab-list" :class="{ active: index === tabIndex }" @tap="tabChang(index)">
				{{ tab.name }}
				<view></view>
			</view>
		</block>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
export default {
	// VUEX 共享属性减少操作
	computed: {
		...mapState(['tabIndex', 'userInfo'])
	},
	props: {
		tabBars: Array
	},
	methods: {
		...mapMutations(['setTabIndex']),
		tabChang(index) {
			this.setTabIndex(index);
		}
	}
};
</script>

<style lang="less">
.uni-tab-bar {
	display: flex;
	flex-direction:row;
	justify-content: center;
	margin-bottom: 20rpx;
	
	.swiper-tab-list {
		color: #a3a3a3;
		font-weight: 500;
	}
	.active {
		color: #343434;
		font-weight: 700;
		view {
			width: 60rpx;
			border-top: 6rpx solid #feb7ba;
			border-bottom: 6rpx solid #feb7ba;
			border-radius: 20upx;
			margin: auto;
		}
	}
}
</style>
